<template>
  <el-card shadow="hover" style="margin-bottom: 10px;padding-top: 18px;">
    <el-form ref="formRef" :model="formData" :inline="props.inline" class="search-form">
      <div>
        <slot :form-data="formData" />
      </div>

      <el-form-item style="width: 200px; flex-shrink: 0">
        <el-button type="primary" :loading="loading" @click="handleSearch">
          搜索
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive } from "vue";

const props = defineProps({
  // 表单数据
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  inline:{
    type: Boolean,
    default: true,    
  }
});

const emit = defineEmits(["search", "reset"]);

const formRef = ref(null);
const formData = reactive({ ...props.modelValue });

/**
 * @description 处理搜索
 */
const handleSearch = () => {
  emit("search", { ...formData });
};

/**
 * @description 处理重置
 */
const handleReset = () => {
  formRef.value?.resetFields();
  emit("reset");
  // emit('update:modelValue', {})
};
</script>

<style lang="scss" scoped>
.search-form {
  border-radius: 4px;
  display: flex;
  align-items: flex-start;

  :deep(.el-select) {
    min-width: 150px;
  }

  :deep(.el-form-item) {
    &:not(:last-child) {
      margin-right: 16px;
    }
  }
}
</style>
